<!-- 服务区 -->
<script>
import { defineComponent } from 'vue';
import SupermapCard from "@/components/SupermapCard/index.vue";
import Api from '@/Api'

export default defineComponent({
  name: "Section-4",
  components: {
    SupermapCard
  },
  setup() {
  },
  data() {
    return {
      total: 0,
      title: '管线养护总数'
    }
  },
  mounted() {
    this.getData();
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    // 获取数据
    async getData() {
      const res = await Api.getTotalOfPipline();
      if (res.code !== 200) { return }
      this.initChart(res.data);
    },
    // 初始化图表
    initChart(data) {
      const dom = document.getElementById("echart-section-4");
      if (!dom) { return }
      const chartIns = echarts.init(dom);
      const dataV = [
        data.eventTotal || 0,
        data.eventDingCount || 0,
        data.eventEndCount || 0,
      ]
      this.total = dataV.reduce((ac, cu) => ac + cu, 0);
      const xData = [
        '上报数',
        '处置中数',
        '处置数'
      ]
      const option = {
        legend: {
          show: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              show: true
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barMaxWidth: 70,
            barGap: '10%',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#299CE1', // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: '#2168B2', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#2168B2', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: dataV,
          }
        ]
      };

      if (option && typeof option === 'object') {
        chartIns.setOption(option);
      }
    }
  }
});
</script>
<template>
  <div class="section section-four">
    <supermap-card :title="title" :width="350" :top="70" :right="20" :height="36" :bottom="20" :shouldDrag="true">
      <div class="main-title">
        <div class="inner">
          管线养护问题
          <span class="weight">{{ total }}</span>
          个
        </div>
      </div>
      <div id="echart-section-4"></div>
    </supermap-card>
  </div>
</template>
<style scoped lang="less">
.section-four {
  position: absolute;
  top: 55rem;
  right: 1rem;
  width: 43rem;
}
.main-title {
  height: 5rem;
  background-color: rgba(224, 233, 246, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  & > .inner {
    padding: 0 4rem;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #666;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0 center, right 0 center;
    background-image: url(@/assets/images/time-slider/icon-arrow-left.png),
      url(@/assets/images/time-slider/icon-arrow-right.png);
  }
}
.weight {
  font-weight: bold;
  color: #000;
  padding: 0 5px;
}

#echart-section-4 {
  height: 43rem;
  background-color: rgba(224, 233, 246, .8);
}
</style>